<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>axios入门与源码解析</title>
  <link rel="stylesheet" href="../bootstrap.min.css">
  <script src="../axios.js"></script>
</head>

<body>
  <div class="container">
    <h2>axios基本使用</h2>
    <p>
      <a href="https://github.com/axios/axios">去Git学习axios</a>
    </p>
    <button class="btn btn-primary">发送GET请求</button>
    <button class="btn btn-warning">发送POST请求</button>
  </div>
  <script>
    // 获取按钮
    const btns = document.querySelectorAll('button')
    // 添加请求拦截器
    axios.interceptors.request.use(function (config) {
      // 修改config中的参数
      config.params = {a:100}
      console.log('请求拦截器--成功-1号')
      return config;
      // throw '参数出错'
    }, function (error) {
      console.log('请求拦截器--失败-1号')
      return Promise.reject(error);
    });
    axios.interceptors.request.use(function (config) {
      // 修改config中的参数
      config.timeout = 1000
      console.log('请求拦截器--成功-2号')
      return config;
      // throw '参数出错'
    }, function (error) {
      console.log('请求拦截器--失败-2号')
      return Promise.reject(error);
    });


    // 添加响应拦截器
    axios.interceptors.response.use(function (response) {
      console.log('响应拦截器--成功-1号')
      console.log(response)
      return response.data;
    }, function (error) {
      console.log('响应拦截器--失败-1号')
      return Promise.reject(error);
    });
    axios.interceptors.response.use(function (response) {
      console.log('响应拦截器--成功-2号')
      return response;
    }, function (error) {
      console.log('响应拦截器--失败-2号')
      return Promise.reject(error);
    });


    axios({
      method:'get',
      url:'http://localhost:3000/comments'
    }).then(res=>{
      console.log('响应成功-成功回调')
      console.log(res)
    }).catch(error=>{
      console.log('响应失败-失败回调')
      console.log('失败原因：',error)
    })
    /* 
      输出顺序：
        请求拦截器--成功-2号
        请求拦截器--成功-1号
        响应拦截器--成功-1号
        响应拦截器--成功-2号
        响应成功-成功回调
    */
  </script>
</body>

</html>